<template>
  <div class="app-container">
    <div class="content">
      <div class="lgm-search">
        <el-form
          ref="form"
          :model="searchParams"
          label-width="100px"
          class="search-form"
        >
          <el-form-item label="名称">
            <el-input
              v-model="searchParams.title"
              placeholder="请输入名称"
            ></el-input>
          </el-form-item>
          
          <el-form-item label="提现状态">
            <el-select v-model="searchParams.package_id">
              <el-option v-for="(item,idx) in packageselectList"
              :key="idx"
              :value="item.id"
              :label="item.name" />
             
            </el-select>
          </el-form-item>

          <el-row>
            <el-button
              type="success"
              class="lgm-search-btn"
              icon="el-icon-search"
              @click="seach"
              >搜索</el-button
            >
            <el-button
              class="lgm-reset-btn"
              icon="el-icon-refresh"
              @click="reset"
              >重置</el-button
            >
          </el-row>
        </el-form>
      </div>

      <div class="table">
        <el-table :data="dataList" border>
          <el-table-column
            prop="nickname"
            label="企业名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="legal_person"
            label="老板姓名"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="store_mobile"
            label="联系方式
"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="store_address"
            label="地址"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="package_name"
            label="类型"
            align="center"
          ></el-table-column>
          <!-- <el-table-column prop="type" label="类型" align="center">
            <template slot-scope="scope">
              <div>
                <p v-if="scope.row.type == 1">支付宝</p>
                <p v-if="scope.row.type == 2">微信</p>
                <p v-if="scope.row.type == 3">银行卡</p>
              </div>
            </template>
          </el-table-column> -->

          <el-table-column
            prop="nickname"
            label="关联推广员"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="expiration_at"
            label="使用期限"
            align="center"
          ></el-table-column>
          >
          <!-- <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="280"
           <template slot-scope="scope">
              <div class="flex">
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  @click="handleEdit(scope.$index, scope.row)"
                >
                  <i class="el-icon-edit"></i> 修改
                </el-button>
                <el-button
                  size="mini"
                  plain
                  v-if="scope.row.status == 0 || scope.row.status == 1"
                  @click="handleEdit2(scope.$index, scope.row)"
                >
                  审批申请
                </el-button>
                <el-button size="mini" type="danger" plain
									@click="handleDelete(scope.$index, scope.row)">
									<i class="el-icon-delete"></i> 删除
								</el-button>
              </div>
            </template> 
          </el-table-column>-->
        </el-table>
      </div>
      <div class="lgm-page-wrap">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :page-sizes="[10, 100, 200, 300, 400]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 修改 -->
    <el-dialog title="提现" :visible.sync="dialogVisible" center width="500px">
      <el-form
        :model="detailForm"
        ref="ruleForm"
        label-width="100px"
        class="detailForm"
      >
        <el-form-item label="提现类型" style="width: 100%">
          <el-radio
            v-model="detailForm.type"
            label="1"
            :disabled="detailForm.id ? true : false"
            >支付宝</el-radio
          >
          <el-radio
            v-model="detailForm.type"
            label="2"
            :disabled="detailForm.id ? true : false"
            >微信</el-radio
          >
          <el-radio
            v-model="detailForm.type"
            label="3"
            :disabled="detailForm.id ? true : false"
            >银行卡</el-radio
          >
        </el-form-item>
        <el-form-item label="申请金额" prop="money" style="width: 100%">
          <el-input
            v-model="detailForm.money"
            :disabled="detailForm.id ? true : false"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks" style="width: 100%">
          <el-input v-model="detailForm.remarks"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button class="lgm-reset-btn" @click="dialogVisible = false"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="dialogConfirm('ruleForm')"
          class="lgm-search-btn"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="审核" :visible.sync="dialogVisible2" center width="500px">
      <el-form
        :model="detailForm"
        ref="ruleForm"
        label-width="100px"
        class="detailForm"
      >
        <el-form-item label="提现类型" style="width: 100%">
          <el-radio
            v-if="detailForm.status == 0"
            v-model="detailForm.type"
            label="1"
            >审核通过</el-radio
          >
          <el-radio
            v-if="detailForm.status == 0"
            v-model="detailForm.type"
            label="2"
            >审核失败</el-radio
          >
          <el-radio
            v-if="detailForm.status == 1"
            v-model="detailForm.type"
            label="3"
            >转账成功</el-radio
          >
        </el-form-item>

        <el-form-item label="审批备注" prop="remarks" style="width: 100%">
          <el-input v-model="detailForm.remarks"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button class="lgm-reset-btn" @click="dialogVisible2 = false"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="dialogConfirm2('ruleForm')"
          class="lgm-search-btn"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  staticdelivery,
  clothing_categoryAdmin,
  styleAdmin,
  colorAdmin,
  sizeAdmin,
  Platformstore,
  set_status,
  packageselect
} from "@/api/admin";

export default {
  name: "StyleManage",
  data() {
    return {
      page: 1,
      page_size: 10,
      total: 0,
      detail: {},
      clothing_categoryAdminList: [],
      styleAdminList: [],
      sizeList: [],
      colorList: [],

      searchParams: {
        package_id: "",
        title: "",
      },
      detailForm: {
        type: "1",
        money: "",
        remarks: "",
      },
      rules: {},
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      ],
      dataList: [],
      dialogVisible: false,
      dialogVisible2: false,
      packageselectList:[]
    };
  },
  mounted() {
    this.PlatformstoreFn();
    
    packageselect(
        { },
        "GET"
      ).then((e) => {
        this.packageselectList = [{name:'普通用户',id:0},...e.data.list];
      });
  },
  methods: {
    handleSizeChange(value) {
      this.page_size = value;
      this.PlatformstoreFn();
    },
    handleCurrentChange(value) {
      this.page = value;
      this.PlatformstoreFn();
    },
    PlatformstoreFn() {
      Platformstore(
        {
          page: this.page,
          page_size: this.page_size,
          ...this.searchParams,
        },
        "GET"
      ).then((e) => {
        console.log(e.data.list);
        this.dataList = e.data.list;
        this.total = e.data.total;
      });
     
    },
    dialogConfirm() {
      console.log(this.detailForm);
      Platformstore(
        this.detailForm,
        this.detailForm.id ? "PATCH" : "POST",
        this.detailForm.id
      ).then((e) => {
        this.dialogVisible = false;
        this.seach();
      });
    },

    seach() {
      this.page = 1;
      this.PlatformstoreFn();
    },
    reset() {
      for (let i in this.searchParams) {
        this.searchParams[i] = null;
      }
      this.seach();
    },

    addList() {
      this.detailForm = {
        type: "1",
        money: "",
        remarks: "",
      };
      this.dialogVisible = true;
    },
    handleEdit(idx, item) {
      Platformstore(
        {
          id: item.id,
        },
        "GET",
        item.id
      ).then((e) => {
        this.detailForm = JSON.parse(JSON.stringify(item));

        this.dialogVisible = true;
      });
    },
    handleEdit2(idx, item) {
      Platformstore(
        {
          id: item.id,
        },
        "GET",
        item.id
      ).then((e) => {
        this.detailForm = JSON.parse(JSON.stringify(item));
        if (item.status == 1) {
          this.detailForm.type = "3";
        } else {
          this.detailForm.type = "1";
        }

        this.dialogVisible2 = true;
      });
    },
    dialogConfirm2() {
      console.log(this.detailForm);
      set_status(this.detailForm, "POST").then((e) => {
        this.dialogVisible = false;
        this.seach();
      });
    },

    handleDelete(index, item) {
      this.$confirm("是否确认删除选中的?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        confirmButtonClass: "submitDeleteBtn",
        type: "warning",
      }).then(() => {
        Platformstore({}, "DELETE", item.id).then((e) => {
          this.seach();
        });

        this.$message({
          type: "success",
          message: "删除成功!",
        });
      });
    },
    colorAdminFn() {
      colorAdmin(
        {
          page: 1,
          page_size: 1000,
        },
        "GET"
      ).then((e) => {
        this.colorList = e.data.list;
      });
    },
    sizeAdminFn() {
      sizeAdmin(
        {
          page: 1,
          page_size: 1000,
        },
        "GET"
      ).then((e) => {
        this.sizeList = e.data.list;
      });
    },
    clothing_categoryAdminFn() {
      clothing_categoryAdmin(
        {
          page: 1,
          page_size: 1000,
        },
        "GET"
      ).then((e) => {
        this.clothing_categoryAdminList = e.data.list;
      });
    },
    styleAdminFn() {
      styleAdmin(
        {
          page: 1,
          page_size: 1000,
        },
        "GET"
      ).then((e) => {
        this.styleAdminList = e.data.list;
      });
    },

    clickItem() {
      console.log(456);
    },
    formatDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, "0"); // 月份从0开始
      const day = String(d.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    staticdeliveryFn() {
      let obj = this.searchParams;
      if (this.searchParams.time1) {
        obj["start_time"] = this.formatDate(this.searchParams.time1[0]);
        obj["end_time"] = this.formatDate(this.searchParams.time1[1]);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.app-container {
  .content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
  }

  .lgm-search {
    ::v-deep input {
      width: 210px;
    }
  }

  .info {
    display: flex;
    margin-bottom: 20px;

    .item {
      width: 220px;
      padding: 8px 15px;
      border: 1px solid #eee;
      border-radius: 6px;
      margin-right: 30px;

      .title {
        margin-bottom: 6px;
      }

      .box {
        width: 100%;
        height: 100px;
        border-radius: 6px;
        background-color: #fdf0e5;
        display: flex;
        align-items: center;
        justify-content: center;
        color: $fontColor;
        font-weight: bold;
        font-size: 18px;
      }
    }
  }
}
</style>
